<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <el-collapse-item title="事故事件发生的可能性（L）判定准则" name="1">
        <LECKNXIndexL ref="mychild1"></LECKNXIndexL>
      </el-collapse-item>
      <el-collapse-item title="暴露于危险环境的频繁程度（E）判定准则" name="2">
        <LECKNXIndexE ref="mychild2"></LECKNXIndexE>
      </el-collapse-item>
      <el-collapse-item title="发生事故事件偏差产生的后果严重性（C）判定准则" name="3">
        <LECYZXIndexC ref="mychild3"></LECYZXIndexC>
      </el-collapse-item>
      <el-collapse-item title="风险等级判定准则（D）及控制措施" name="4">
        <LECKZCSIndex ref="mychild4"></LECKZCSIndex>
      </el-collapse-item>
      <el-collapse-item title="风险级别设置" name="5">
        <LECJBSZIndex ref="mychild5"></LECJBSZIndex>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import LECKNXIndexL from '../AllTable/LECKNXIndexL'
import LECKNXIndexE from '../AllTable/LECKNXIndexE'
import LECYZXIndexC from '../AllTable/LECYZXIndexC'
import LECKZCSIndex from '../AllTable/LECKZCSIndex'
import LECJBSZIndex from '../AllTable/LECJBSZIndex'
import 'qrcodejs2/jquery.min.js'
  export default {
    components: {LECKNXIndexL,LECKNXIndexE,LECYZXIndexC,LECKZCSIndex,LECJBSZIndex},
    data() {
      return {
        activeNames: '',
        itemMaxHeight: 100,
      };
    },
    methods: {
      handleChange(val) {
        if(val == 1){
          this.$refs.mychild1.initData();
        }else if(val == 2){
          this.$refs.mychild2.initData();
        }else if(val == 3){
          this.$refs.mychild3.initData();
        }else if(val == 4){
          this.$refs.mychild4.initData();
        }else if(val == 5){
          this.$refs.mychild5.initData();
        }
      },
      computedItemHeight(){
        return window.innerHeight - Array.from(document.querySelectorAll('.el-collapse-item'))
          .reduce((s,el)=>{
            return s+el.children[0].offsetHeight
          }, 0)
      },
    },
    mounted(){
      setTimeout(() => {
        this.itemMaxHeight = this.computedItemHeight();
        Array.from(document.querySelectorAll('.el-collapse-item__wrap'))
        .forEach((el)=>{
          el.style.maxHeight = (this.itemMaxHeight-241) + 'px'
        })
        $(document).find('.el-collapse-item__content').height((this.itemMaxHeight-241) + 'px');
      }, 1000);
      this.itemMaxHeight = this.computedItemHeight();
		},
  }
</script>